<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="dialogVisible"
      width="580px"
      append-to-body
      :modal="true"
      @close="closeDialog"
    >
      <span slot="title" class="dialog-title">{{ dialogTitle }}</span>
      <div class="dialogBody">
        <el-form ref="mealForm" :label-position="labelPosition" label-width="85px" :model="mealForm" size="mini">
          <el-form-item label="套餐名称：" style="width:350px" prop="packageName">
            <el-input v-model="mealForm.packageName" placeholder="" :readonly="isEdit"></el-input>
          </el-form-item>
          <el-form-item label="罗慕或活动矫治器数量：" class="extent" prop="quantity">
            <el-input v-model="mealForm.quantity" placeholder="" :disabled="unQuantity" oninput="value=value.replace(/[^\d.-]/g,'')"></el-input>
            <span class="until">副</span><el-checkbox v-model="unQuantity" @change="unChange('unQuantity')">不限</el-checkbox>
          </el-form-item>
          <el-form-item label="隐形矫治器数量：" class="extent" prop="invisibleQuantity">
            <el-input v-model="mealForm.invisibleQuantity" placeholder="" :disabled="unInvisibleQuantity" oninput="value=value.replace(/[^\d.-]/g,'')"></el-input>
            <span class="until">副</span><el-checkbox v-model="unInvisibleQuantity" @change="unChange('unInvisibleQuantity')">不限</el-checkbox>
          </el-form-item>
          <el-form-item label="套餐内保持矫治器数量：" class="extent" prop="packageInRetainingQuantity">
            <el-input v-model="mealForm.packageInRetainingQuantity" placeholder="" :disabled="unPackageInRetainingQuantity" oninput="value=value.replace(/[^\d.-]/g,'')"></el-input>
            <span class="until">副</span><el-checkbox v-model="unPackageInRetainingQuantity" @change="unChange('unPackageInRetainingQuantity')">不限</el-checkbox>
          </el-form-item>
          <el-form-item label="套餐外保持矫治器数量：" class="extent" prop="packageOutRetainingQuantity">
            <el-input v-model="mealForm.packageOutRetainingQuantity" placeholder="" :disabled="unPackageOutRetainingQuantity" oninput="value=value.replace(/[^\d.-]/g,'')"></el-input>
            <span class="until">副</span><el-checkbox v-model="unPackageOutRetainingQuantity" @change="unChange('unPackageOutRetainingQuantity')">不限</el-checkbox>
          </el-form-item>
          <el-form-item label="诊疗阶段：" class="phase" prop="phase">
            <el-checkbox-group v-model="mealForm.phase">
              <el-checkbox v-for="item of dict.order_treat_stage" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div class="lineData">
            <el-form-item label="服务期限：" prop="servicePeriod">
              <el-input v-model="mealForm.servicePeriod" placeholder="" oninput="value=value.replace(/[^\d]/g,'')"></el-input><span class="until">月</span>
            </el-form-item>

            <el-form-item label="" prop="lastAge" class="checkAge">
              <el-checkbox v-model="checkedLastAge">年龄期限：</el-checkbox>
              <el-input v-model="mealForm.lastAge" placeholder="" :disabled="!checkedLastAge" oninput="value=value.replace(/[^\d]/g,'')"></el-input><span class="until">周岁</span>
            </el-form-item>

          </div>
          <div class="lineData">
            <el-form-item label="更换周期：" prop="changePeriod">
              <el-input v-model="mealForm.changePeriod" placeholder="" oninput="value=value.replace(/[^\d]/g,'')"></el-input><span class="until">月</span>
            </el-form-item>
          </div>
          <el-form-item label="诊疗建议：" prop="rules">
            <el-checkbox-group v-model="mealForm.rules">
              <el-checkbox v-for="item of dict.package_rule" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="套餐介绍：" prop="intro">
            <el-input v-model="mealForm.intro" type="textarea" rows="4"></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm('mealForm')">保存</el-button>
            <el-button @click="resetForm('mealForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addPackage, queryPackage, editPackage } from '@/api/packageRule';
import { mapGetters } from 'vuex';
export default {
  components: {},
  dicts: ['order_treat_stage', 'package_rule'],
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '新增套餐',
      isEdit: false, // 是否编辑
      labelPosition: 'left', //  左对齐
      checkedLastAge: false,
      unQuantity: false,
      unInvisibleQuantity: false,
      unPackageInRetainingQuantity: false,
      unPackageOutRetainingQuantity: false,
      mealForm: {
        createBy: null,
        packageName: null, // 套餐名称
        quantity: null, // 罗慕或活动矫治器数量
        invisibleQuantity: null, // 隐形矫治器数量
        packageInRetainingQuantity: null, // 套餐内保持矫治器数量
        packageOutRetainingQuantity: null, // 套餐外保持矫治器数量
        phase: [], // 诊疗阶段
        servicePeriod: null, // 服务期限
        changePeriod: null, // 更换周期
        rules: [], // 诊疗建议
        lastAge: null, // 年龄期限
        intro: null // 套餐介绍
      }
    };
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    isShow(item = {}, isEdit = false) {
      this.dialogVisible = true;
      this.isEdit = isEdit;
      if (isEdit) {
        this.dialogTitle = '编辑套餐';
        const _meal = this.mealForm;
        queryPackage({ id: item.id }).then(res => {
          for (const key in _meal) {
            if (key !== 'phase' && key !== 'rules') {
              _meal[key] = res[key] || '';
            }
            _meal.enabled = res.enabled;
            _meal.phase = res.phaseList;
            _meal.packageId = res.id;
            _meal.rules = res.ruleList;
            if (_meal.quantity === -1) {
              this.unQuantity = true;
            }
            if (_meal.invisibleQuantity === -1) {
              this.unInvisibleQuantity = true;
            }
            if (_meal.packageInRetainingQuantity === -1) {
              this.unPackageInRetainingQuantity = true;
            }
            if (_meal.packageOutRetainingQuantity === -1) {
              this.unPackageOutRetainingQuantity = true;
            }
            if (_meal.lastAge) {
              this.checkedLastAge = true;
            }
          }
        }).catch(err => { console.log(err); });
      }
    },
    // 关闭弹窗
    closeDialog() {
      this.resetForm();
    },
    // 取消
    resetForm(mealForm) {
      this.checkedLastAge = false;
      this.unQuantity = false;
      this.unInvisibleQuantity = false;
      this.unPackageInRetainingQuantity = false;
      this.unPackageOutRetainingQuantity = false;
      this.$refs.mealForm.resetFields();
      this.dialogVisible = false;
    },
    unChange(item) {
      const _r = item.replace('un', '');
      const r = _r.replace(_r[0], _r[0].toLowerCase());
      if (this[item]) {
        this.mealForm[r] = -1;
      } else {
        this.mealForm[r] = null;
      }
    },
    // 提交
    submitForm(mealForm) {
      this.$refs[mealForm].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            editPackage(this.mealForm).then(res => {
              this.$notify.success('编辑成功');
              this.resetForm();
              this.$emit('addPackageSuccess');
            }).catch(err => { console.log(err); });
          } else {
            this.mealForm.createBy = this.user.id;
            addPackage(this.mealForm).then(res => {
              this.$notify.success('新增成功');
              this.resetForm();
              this.$emit('addPackageSuccess');
            }).catch(err => { console.log(err); });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
>>> .el-dialog{
  margin-top: 5vh !important;
}
.extent{
  >>> .el-form-item__label{
    width: 170px !important;
  }
  .el-input{
    width: 150px;
  }
  .el-checkbox{
    float: right;
  }
}
.until{
  margin-left: 20px;
}
.lineData{
  .el-form-item{
    width: 44%;
    display: inline-block;
    .el-input{
      width: 100px;
    }
  }
  .checkAge{
    float: right;
    width: 50%;
    text-align: right;
    margin: 0;
    >>> .el-form-item__content{
      margin-left: 0 !important;
    }
    .el-input{
      width: 100px;
    }
  }
}
.phase{
  .el-checkbox-group{
    .el-checkbox{
      width: 179px;
    }
  }
}

.btn{
  >>> .el-form-item__content{
    margin: 0 auto !important;
    text-align: center;
  }
}
</style>
